<template>
  <div class="book-detail-container">
    <!-- 图书基本信息 -->
    <div class="book-info">
      <div class="book-cover">
        <el-image :src="book.coverUrl" fit="contain" class="cover-image">
          <template #error>
            <div class="cover-error">暂无封面</div>
          </template>
        </el-image>
      </div>
      <!-- 图书基本信息 -->
      <div class="boos-meta">
        <h2>{{ book.title }}</h2>
        <p><strong>作者：</strong>{{ book.author }}</p>
        <p><strong>出版社：</strong>{{ book.publisher }}</p>
        <p><strong>出版日期：</strong>{{ book.publishDate }}</p>
        <p><strong>ISBN：</strong>{{ book.isbn }}</p>
        <p><strong>简介：</strong>{{ book.description }}</p>
      </div>
    </div>

    <!-- 用户评价 -->
    <div class="user-reviews">
      <h3>用户评价</h3>
      <el-card v-for="(review, index) in reviews" :key="index" class="review-card">
        <p><strong>{{ review.user }}</strong></p>
        <p>{{ review.comment }}</p>
      </el-card>
    </div>

    <!-- 借阅按钮 -->
    <el-button type="primary" @click="openBorrowDialog">借阅</el-button>

    <!-- 分步借阅弹窗 -->
    <el-dialog v-model="borrowDialogVisible" title="借阅流程" :width="dialogWidth">
      <div class="borrow-dialog-content">
        <!-- 步骤条 -->
        <el-steps :active="currentStep" finish-status="success" :simple="!isMobile" align-center>
          <el-step title="书籍信息" description="确认书籍信息"></el-step>
          <el-step title="选择借阅时长" description="选择借书和还书日期"></el-step>
          <el-step title="确认借阅信息" description="确认借阅信息"></el-step>
        </el-steps>

        <!-- 步骤内容 -->
        <div class="borrow-step">
          <div v-if="currentStep === 1">
            <h4>书籍信息</h4>
            <p><strong>书名：</strong>{{ book.title }}</p>
            <p><strong>作者：</strong>{{ book.author }}</p>
            <p><strong>ISBN：</strong>{{ book.isbn }}</p>
            <el-button type="success" @click="nextStep">下一步</el-button>
          </div>

          <div v-if="currentStep === 2">
            <h4>选择借阅时长</h4>
            <el-date-picker v-model="borrowDate" type="date" placeholder="选择借书日期" class="date-picker"></el-date-picker>
            <el-date-picker v-model="returnDate" type="date" placeholder="选择还书日期" class="date-picker"></el-date-picker>
            <el-button type="success" @click="nextStep">下一步</el-button>
          </div>

          <div v-if="currentStep === 3">
            <h4>确认借阅信息</h4>
            <p><strong>书名：</strong>{{ book.title }}</p>
            <p><strong>作者：</strong>{{ book.author }}</p>
            <p><strong>借书日期：</strong>{{ borrowDate }}</p>
            <p><strong>还书日期：</strong>{{ returnDate }}</p>
            <el-button type="success" @click="completeBorrow">完成借阅</el-button>
          </div>
        </div>
      </div>
    </el-dialog>

    <el-skeleton :loading="isLoading" animated>
      <!-- 原有模板内容保持不变 -->
    </el-skeleton>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { ElMessage } from "element-plus";
import api from "@/api";
import { useRoute } from "vue-router";

const book = ref({
  title: "",
  author: "",
  publisher: "",
  publishDate: "",
  isbn: "",
  description: "",
  coverUrl: ""
});

const isLoading = ref(true);

const route = useRoute();

const borrowDialogVisible = ref(false);
const currentStep = ref(1);
const borrowDate = ref(null);
const returnDate = ref(null);

const isMobile = computed(() => window.innerWidth <= 768);
const dialogWidth = computed(() => (isMobile.value ? "90%" : "50%"));


// 获取图书详情
const fetchBookInfo = async () => {
  try {
    const res = await api.book.getBookInfo({ id: route.query.id });
    book.value = {
      ...res.data,
      coverUrl: res.data.coverUrl || require('@/assets/default-book.png')
    };
  } catch (error) {
    console.log(error,"err")
    ElMessage.error("获取图书信息失败");
  } finally {
    isLoading.value = false;
  }
};

onMounted(fetchBookInfo);

const openBorrowDialog = () => {
  borrowDialogVisible.value = true;
  currentStep.value = 1;
};

const nextStep = () => {
  if (currentStep.value === 2 && (!borrowDate.value || !returnDate.value)) {
    ElMessage.error("请选择借书和还书日期！");
  } else {
    currentStep.value += 1;
  }
};

const completeBorrow = () => {
  if (borrowDate.value && returnDate.value) {
    if (new Date(borrowDate.value) < new Date(returnDate.value)) {
      ElMessage.success("借阅成功！");
      borrowDialogVisible.value = false;
    } else {
      ElMessage.error("借书日期必须早于还书日期！");
    }
  } else {
    ElMessage.error("请选择借书和还书日期！");
  }
};
</script>

<style lang="scss" scoped>
.book-detail-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  border-radius: 8px;

  .book-info {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;

    .book-cover {
      width: 260px;
      min-width: 260px;
      
      .cover-image {
        width: 100%;
        height: 360px;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      }
      
      .cover-error {
        @extend .cover-image;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f5f5f5;
        color: #999;
      }
    }

    .book-meta {
      flex: 1;
      
      .book-title {
        margin: 0 0 20px;
        font-size: 28px;
        color: #333;
      }
      
      .meta-item {
        margin-bottom: 15px;
        font-size: 16px;
        
        .label {
          color: #666;
          min-width: 80px;
          display: inline-block;
        }
        
        .value {
          color: #333;
        }
      }
    }
  }

  @media (max-width: 768px) {
    padding: 10px;
    
    .book-info {
      flex-direction: column;
      gap: 20px;
      
      .book-cover {
        width: 100%;
        min-width: auto;
        
        .cover-image {
          height: auto;
          aspect-ratio: 2/3;
        }
      }
      
      .book-meta {
        .book-title {
          font-size: 22px;
          margin-bottom: 15px;
        }
        
        .meta-item {
          font-size: 14px;
        }
      }
    }
    
    .user-reviews {
      h3 {
        font-size: 18px;
      }
    }
    
    .el-button {
      width: 100%;
      margin: 15px auto;
    }
  }
}
</style>